<template>
    <div >
        <div @click="handel">
            <button @click.stop="true">click</button>
        </div>
        
        <!-- .stop阻止事件冒泡 -->
        <form @submit.prevent="submit">
            <input type="text" value="123" name="user">
            <!-- 禁止自动提交 -->
            <button @click="submit" type="button">事件</button>
        </form>
        <!-- 阻止默认事件 .prevent 修饰符 -->
    </div>
</template>
<script>
export default {
    methods:{
        submit(){
            //ajax
            alert('from')
        },
        handel(event){
            //event是事件默认注入的
            //获取原生js对象 event.target
            //target获取事件触发的元素（点谁触发）
            //currentTarget获取事件绑定的元素（绑定了谁）
            console.log(event.currentTarget);
            event.target.style.background="green";
            event.currentTarget.style.background="red"
            //event.target.style.color = 'red';

            // 事件修饰符
            //- .stop 阻止事件冒泡
            //- .
        }
    }
}
</script>